<template>
	<view>
		<u-tabs :list="tabList" font-size="35" name="cate_name" bg-color="#fff" active-color="#262239"
			:current="current" @change="tabChange">
		</u-tabs>
		<view class="container">
			<view v-if="current ===0">
				<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
					<view class="follow-list">
						<view v-for="(item, index) in followList" :key="index">
							<view class="post-item">
								<!--用户信息-->
								<view class="post-item-top-user">
									<view @click.stop="toUcenterf(item.followed_id)">
										<u-avatar class="avatar" :src="item.member_headimg"></u-avatar>
									</view>
									<view class="center">
										<view style="display: felx;align-items: center;">
											<text class="username">{{item.member_name}}</text>
										</view>
										<view class="time">
											{{ $util.timeStampTurnTime(item.create_time, 'time') }}
										</view>
									</view>
								</view>
								<!--帖子列表-->
								<view class="post-content" @click="postDetail(item.post_id)">
									<view class="post-text" v-if="item.title">{{item.title}}</view>
									<rich-text class="post-text" :nodes="item.content"></rich-text>
									<!-- 帖子类型 -->
									<view v-if="item.type == 1 || item.type ==0 || item.media[0]!==''">
										<!--一张图片-->
										<block v-if="item.media.length == 1">
											<image :lazy-load="true" mode="aspectFill" class="img-style-1"
												:src="$util.img(item.media[0])"></image>
										</block>
										<!--二张图片-->
										<block v-if="item.media.length == 2">
											<view class="img-style-2">
												<image :lazy-load="true" v-for="(mediaItem, index2) in item.media"
													:key="index2" mode="aspectFill" :src="$util.img(mediaItem)"></image>
											</view>
										</block>
										<!--三张以上图片-->
										<block v-if="item.media.length > 2">
											<view class="img-style-3">
												<image :lazy-load="true" v-for="(mediaItem, index2) in item.media"
													:key="index2" mode="aspectFill" :src="$util.img(mediaItem)"></image>
											</view>
										</block>
									</view>
									<!-- 视频 -->
									<view v-if="item.type == 2 && item.video!==null">
										<video :src="$util.img(item.video)" controls objectFit="cover"></video>
									</view>
									<!--评论点赞数-->
									<view class="footer u-flex u-row-between u-m-t-25">
										<view>
											<text>圈子|{{item.topic_name}}</text>
										</view>
										<view class="u-flex">
											<button @click.stop="onShare" class="u-reset-button" open-type="share">
												<u-icon name="zhuanfa"></u-icon>
												<text class="count">分享</text>
											</button>
											<view>
												<u-icon name="eye" size="36" ></u-icon>
												<text >{{item.read_count}}</text>
											</view>
											<view class="u-m-l-20">
												<u-icon name="heart" size="36" ></u-icon>
												<text >{{item.dianzan_num}}</text>
											</view>
										</view>
									</view>
								</view>

							</view>
						</view>
						<u-loadmore v-if="followList.length" height="80rpx" :status="loadStatus" icon-type="flower"
							color="#ccc" />
					</view>
				</scroll-view>
			</view>
			<view v-if="current === 1">
				<!--圈子入口-->
				<view class="topic-wrap">
					<u-grid @click="jump" :col="5" :border="false">
						<!--发现圈子-->
						<u-grid-item index="/newpages/social/found">
							<navigator class="grid-topic">
								<u-icon name="grid" size="60"></u-icon>
								<view class="name">发现圈子</view>
							</navigator>
						</u-grid-item>
						<!--消息-->
						<u-grid-item index="/newpages/social/message">
							<navigator class="grid-topic">
								<u-badge :count="countnum" :offset="[-20, -20]"></u-badge>
								<u-icon name="chat" size="60"></u-icon>
								<view class="name">消息</view>
							</navigator>
						</u-grid-item>
						<!--创建圈子-->
						<u-grid-item index="/newpages/social/add-plus/add-circle">
							<navigator class="grid-topic">
								<u-icon name="plus" size="60"></u-icon>
								<view class="name">创建圈子</view>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
				<!--动态列表-->
				<scroll-view scroll-y="true" @scrolltolower="loadMore" enable-back-to-top class="scroll-box">
					<view class="post-list " v-if="topicList.length">
						<view v-for="(item, index) in topicList" :key="index">
							<view class="post-item">
								<!--用户信息-->
								<view class="post-item-top-user">
									<view @click.stop="toUcenter(item.member_id)">
										<u-avatar class="avatar" :src="item.member_headimg"></u-avatar>
									</view>
									<view class="center">
										<view style="display: felx;align-items: center;">
											<text class="username">{{item.member_name}}</text>
										</view>
										<view class="time">
											{{ $util.timeStampTurnTime(item.create_time, 'time') }}
										</view>
									</view>
								</view>
								<!--帖子列表-->
								<view class="post-content" @click="postDetail(item.post_id)">
									<view class="post-text" v-if="item.title">{{item.title}}</view>
									<rich-text class="post-text" :nodes="item.content"></rich-text>
									<!-- 帖子类型 -->
									<view v-if="item.type == 1 || item.type ==0">
										<!--一张图片-->
										<block v-if="item.media.length == 1">
											<image :lazy-load="true" mode="aspectFill" class="img-style-1"
												:src="$util.img(item.media[0])"></image>
										</block>
										<!--二张图片-->
										<block v-if="item.media.length == 2">
											<view class="img-style-2">
												<image :lazy-load="true" v-for="(mediaItem, index2) in item.media"
													:key="index2" mode="aspectFill" :src="$util.img(mediaItem)"></image>
											</view>
										</block>
										<!--三张以上图片-->
										<block v-if="item.media.length > 2">
											<view class="img-style-3">
												<image :lazy-load="true" v-for="(mediaItem, index2) in item.media"
													:key="index2" mode="aspectFill" :src="$util.img(mediaItem)"></image>
											</view>
										</block>
									</view>

									<!-- 视频 -->
									<view v-if="item.type == 2 && item.video!==null">
										<video ad-unit-id="adunit-c016268b4e4663d2" :src="$util.img(item.video)"
											controls objectFit="cover"></video>
									</view>

									<!--评论点赞数-->
									<view class="footer u-flex u-row-between u-m-t-25">
										<view>
											<text>圈子|{{item.topic_name}}</text>
										</view>
										<view class="u-flex">
											<button @click.stop="onShare" class="u-reset-button" open-type="share">
												<u-icon name="zhuanfa"></u-icon>
												<text class="count">分享</text>
											</button>
											<view>
												<u-icon name="eye" size="36" ></u-icon>
												<text >{{item.read_count}}</text>
											</view>
											<view class="u-m-l-20">
												<u-icon name="heart" size="36" ></u-icon>
												<text >{{item.dianzan_num}}</text>
											</view>
										</view>
									</view>
									
									
								</view>

							</view>
                           
							<u-gap height="20" bg-color="#f4f6f8" margin-bottom="25"></u-gap>
						
						</view>
						<!-- 更多 -->
						<u-loadmore v-if="topicList.length" height="80rpx" :status="loadStatus" icon-type="flower"
							color="#ccc" />
					</view>
				</scroll-view>

			</view>

			<!--发布帖子-->
			<u-popup v-model="show" mode="bottom" height="260rpx" border-radius="10rpx">
				<view class="handle-wrap">
					<view class="item" @click="goPen">
						<u-icon name="edit-pen"></u-icon>
						<text class="txt">动态</text>
					</view>
					<view class="item" @click="goVideo()">
						<u-icon name="play-right"></u-icon>
						<text class="txt">视频</text>
					</view>
					<!--
					<view class="item" @click="goRenwu()">
						<u-icon name="pushpin"></u-icon>
						<text class="txt">任务</text>
					</view>-->
				</view>
			</u-popup>
			<!--发布按钮-->
			<view class="post-box" @click="show = true">
				<u-icon color="#fff" name="plus"></u-icon>
			</view>
		</view>
		<diy-bottom-nav type="shop"></diy-bottom-nav>
	</view>
</template>

<script>
	import Config from '../../common/js/config.js'
	import globalConfig from '@/common/js/golbalConfig.js';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	export default {
		components: {
			diyBottomNav
		},
		data() {
			return {
				topicList: [],
				followList: [],
				tabList: [{
						name: '关注'
					},
					{
						name: '圈子动态'
					}
				],
				show: false,
				current: 1,
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 1,
				currentPage: 1,
				iconType: 'flower',
				memberId: '',
				followedId: '',
				countnum: '',

			}
		},
		onShow() {
			this.getIndexList();
		
			// 刷新多语言
			this.$langConfig.refresh();
			if (!this.addonIsExit.social) {
				this.$util.showToast({
					title: '商家未开启社区交友',
					mask: true,
					duration: 2000
				});
				setTimeout(() => {
					this.$util.redirectTo('/pages/index/index/index', {}, 'redirectTo');
				}, 2000);
				return;
			}
		},
		onLoad() {
			this.getNum();
			//this.getIndexList();
			//登录后查询
			this.token = uni.getStorageSync('token');
			//登录后查询
			if (uni.getStorageSync('userInfo')) {
				this.member_id = uni.getStorageSync('userInfo').member_id
			}
		},
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				//this.getIndexList();
				this.getFollowList();
				
			}
		},
		mixins: [globalConfig],
			
		methods: {
			onShare() {},
			//获取圈子动态列表
			getIndexList() {
				this.loadStatus = 'loading';
				this.$api.sendRequest({
					url: '/social/api/social/index',
					data: {
						page: this.currentPage,
						member_id: this.member_id
					},
					success: res => {
						if (res.code == 0) {
							this.topicList = res.data.data;
							this.isEmpty = !this.topicList.length;
							this.lastPage = res.data.last_page;
							this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//关注用户列表
			getFollowList() {
				this.loadStatus = 'loading';
				this.$api.sendRequest({
					url: '/social/api/social/followlist',
					data: {
						page: this.currentPage,
						member_id: uni.getStorageSync('userInfo').member_id,
						followed_id: this.followedId
					},
					success: res => {
						if (res.code == 0) {
							this.followList = [...this.followList, ...res.data.data];
							this.isEmpty = !this.followList.length;
							this.lastPage = res.data.last_page;
							this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getFollowId() {
				this.loadStatus = 'loading';
				this.$api.sendRequest({
					url: '/social/api/social/followcenter',
					data: {
						page: this.currentPage,
						member_id: uni.getStorageSync('userInfo').member_id
					},
					success: res => {
						if (res.code == 0) {
							this.followedId = res.data.followed_id.followed_id
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},

			//顶部选项卡切换
			tabChange(index) {
				this.current = index;
				this.getFollowList();
				this.followList = [];
				this.getFollowId();
			},
			//加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getIndexList();
					this.getFollowList();
				}
			},
			//圈子跳转
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			//弹窗类型跳转
			goPen() {
				uni.navigateTo({
					url: '/newpages/social/add-plus/add-topic?type=1'
				})
			},
			goVideo() {
				uni.navigateTo({
					url: '/newpages/social/add-plus/add-topic?type=2'
				})
			},
			goRenwu() {
				uni.navigateTo({
					url: '/newpages/social/add-plus/add-topic?type=3'
				})
			},
			//详情页跳转
			postDetail(postId) {
				this.$util.redirectTo('/newpages/social/detail', {
					post_id: postId
				});
			},
			toUcenter(memberId) {
				this.$util.redirectTo('/newpages/social/index-memberinfo', {
					member_id: memberId
				});
			},
			toUcenterf(followedId) {
				this.$util.redirectTo('/newpages/social/follow-memberinfo', {
					followed_id: followedId
				});
				//console.log(followedId);
			},
			getNum() {
				this.showEmpty = false;
				this.$api.sendRequest({
					url: '/social/api/message/num',
					data: {
						member_id: uni.getStorageSync('userInfo').member_id
					},
					success: res => {
						this.showEmpty = true;
						if (res.code == 0) {
							this.countnum = res.commentnum + res.likenum + res.follownum

						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},



		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #FFFFFF;
	}

	.scroll-box {
		height: 100vh !important;
		white-space: nowrap;
	}

	.topic-wrap {
		background-color: #fff;
		margin-bottom: 30rpx;
	}

	.grid-topic {
		position: relative;
		margin-bottom: 20rpx;
		text-align: center;

		.name {
			font-size: 24rpx;
			text-align: center;
		}
	}

	//帖子列表
	.follow-list {
		margin-bottom: 100px;
	}

	.post-list {
		padding-bottom: 250px;
	}

	.post-item {
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.post-content {
			margin-top: 20rpx;

			.img-style-1 {
				display: block;
				width: 75%;
				max-height: 326rpx;
				border-radius: 5px;
				overflow: hidden;
			}

			.img-style-2 {
				display: flex;

				image {
					margin: 5rpx;
					border-radius: 5px;
					width: 100%;
					height: 294rpx;
				}
			}

			.img-style-3 {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 31.3%;
					height: 200rpx;
					margin: 1%;
					border-radius: 5px;
				}
			}
		}

	}

	//帖子用户信息
	.post-item-top-user {
		display: flex;
		align-items: center;

		.avatar {
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.center {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: #999;

			.username {
				font-size: 32rpx;
				font-weight: 600;
				color: #616161;
			}


		}

	}

	//帖子内容
	.post-text {
		display: block;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 10;
		white-space: pre-wrap;
		overflow: hidden;
	}

	.video-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 500rpx;

		.icon {
			width: 100rpx;
			height: 100rpx;
			z-index: 999;
		}

		image {
			position: absolute;
		}
	}

	.p-footer {
		display: flex;
		margin: 20rpx 0;

		.p-item {
			//margin: 0 auto;
			color: #616161;
			display: flex;
			align-items: center;

			.count {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}

		.p-item[hidden] {
			display: none !important;
		}
	}

	//发布帖子类型弹窗
	.handle-wrap {
		display: flex;
		padding: 50rpx 0;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			padding: 20rpx 0;
			border-radius: 20rpx;

			.icon {
				width: 100rpx;
				margin-bottom: 20rpx;
			}

			.txt {
				font-size: 28rpx;
			}
		}
	}

	//发布按钮
	.post-box {
		background-color: #262239;
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 235rpx;
		right: 50rpx;
		z-index: 999;
		box-shadow: 0 0 10rpx #333;
	}

	//视频
	video {
		width: 100% !important;
	}
</style>
